import { isDef, isEmpty } from "@ct0/functions";
import { Delete as DeleteIcon, CaretDown } from "@ct0/icons";
import RcCascader from "rc-cascader";
import React, { useContext } from "react";
import { ThemeContext } from "../theme";
import classNames from "classnames";
import { useStyles } from "./styles";
import { Dateright } from "@ct0/icons";

import type { CascaderProps, CascaderValue, CascaderOptions } from "./type";

export default function Cascader({
  disabled,
  options: propsOptions,
  placeholder,
  style,
  className,
  changeOnSelect,
  value = [],
  allowClear = true,
  loadData,
  onChange,
  notFoundContent = "暂无数据",
  placement = "bottomLeft",
}: CascaderProps) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyles({ fontSize });

  const options = isEmpty(propsOptions)
    ? [{ value: "_NOT_EXIST_", label: notFoundContent, disabled: true }]
    : propsOptions;

  const handler = (v: Array<CascaderValue>, selected: any) => {
    onChange?.(v);
  };

  const clear = (e: any) => {
    e.stopPropagation();
    onChange?.([]);
  };

  const find = (
    opts: CascaderOptions | undefined = [],
    values: Array<CascaderValue>
  ) => {
    const v = values[0];
    if (!isDef(v)) return;
    let text: Array<string> = [];

    for (const i of opts) {
      if (v == i.value) {
        text.push(i.label);
        if (i.children) {
          const nextText = find(i.children, values.slice(1));
          if (nextText) text = text.concat(nextText);
        }
        break;
      }
    }
    return text;
  };

  const valueText = find(options, value)?.join(" / ");

  return (
    <RcCascader
      disabled={disabled}
      prefixCls="ct0-cascader"
      changeOnSelect={changeOnSelect}
      value={value}
      options={options}
      onChange={handler}
      loadData={loadData}
      expandIcon={<Dateright />}
      expandTrigger="hover"
      dropdownClassName={classes.fontSize}
      getPopupContainer={(trigger: any) => trigger.parentNode}
      placement={placement}
    >
      <div
        className={classNames(
          classes.input,
          className,
          disabled && classes.inputDisabled
        )}
        style={style}
      >
        <div
          className={classNames(
            "ct0-cascader-input-content",
            classes.inputContent
          )}
        >
          {valueText ? (
            <span className={classes.inputItem}>{valueText}</span>
          ) : (
            <span
              className={classNames(classes.inputItem, classes.placeholder)}
            >
              {placeholder}
            </span>
          )}
        </div>
        {allowClear && valueText ? (
          <div className="ct0-cascader-input-remove" onClick={clear}>
            <DeleteIcon />
          </div>
        ) : (
          <div
            className={classNames(
              classes.iconCaret,
              disabled && classes.iconCaretDisabled
            )}
          >
            <CaretDown />
          </div>
        )}
      </div>
    </RcCascader>
  );
}
